<template>
  <div class="login">

    <el-card class="box-card form-card">
      <template #header>
        <div class="card-header">
          <span></span>
          <span>恭迎大王回山!!</span>
          <!-- <el-button class="button" text>登陆</el-button> -->
        </div>
      </template>
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" la  bel-width="0px">
          <!-- 用户名 -->
          <el-form-item prop="userName">
            <el-input v-model="ruleForm.userName" class="w-6 m-2" size="large" placeholder="用户名">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- <el-form-item prop="userName">
            <el-input v-model="input" placeholder="Please input">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
              </template></el-input>
          </el-form-item> -->


          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" class="w-60 m-2" size="large" type="password" placeholder="密码">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- 记住我 -->
          <el-form-item prop="type">
            <el-checkbox label="记住密码" checked="checked" class="m-2" name="type"></el-checkbox>
          </el-form-item>

          <!-- 登录按钮 -->
          <el-form-item>
            <el-button class="m-2 my-custom-button" color="#626aef" :dark="isDark" size="large" @click="submitForm(ruleFormRef)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <div class="login-form">

    </div>


  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
//import { post } from '@/utils/api';
import { ElMessage } from "element-plus";
import {
  setToken,
  setUserInfo,
  //removeToken,
  //removeUserInfo,
} from "@/utils/storage";
import { md5Encryption } from "@/utils/encrypt";
import { login } from "@/apis/user";
import router from '@/router/index'
//import KilaKilaFormCard from "./KilaKilaFormCard.vue"
//import router from "../router/index";
//import store from "../store";

export default {
  name: "LoginIndex",
  components: {
    User,
    Lock,

  },
  setup() {
    //removeToken();
    //removeUserInfo();

    let ruleFormRef = ref();

    let ruleForm = reactive({
      userName: "",
      password: "",
    });

    let rules = reactive({
      userName: [
        {
          required: true,
          message: "用户名不能为空",
          trigger: "change",
        },
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "change" },
      ],
    });

    function submitForm(form) {
      if (!form) return;

      form.validate((valid) => {
        if (!valid) {
          ElMessage.error("用户名和密码不能为空");
          return;
        }

      
        login(ruleForm.userName, md5Encryption(ruleForm.password)).then(
          (data) => {
            setToken(data);
            setUserInfo('userinfo');
            //store.commit("adminAbout/updateIsAdmin");
            router.push("/book");
          }
        ).catch((error) => {
          console.log('Failed with reason:', error); // 输出: Failed with reason: error
        });
        //var url = "/user/login";
        // post(url, { "username": ruleForm.userName, "password": md5Encryption(ruleForm.password) }, 'form').then(
        //   (data) => {
        //     setToken(data.token);
        //     setUserInfo(data.userInfo);
        //     //store.commit("adminAbout/updateIsAdmin");
        //     //router.push("/");
        //   }
        // );
      });
    }

    return {
      rules,
      ruleForm,
      ruleFormRef,
      submitForm,
    };
  },
};
</script>

<style scoped>
.login {
  display: block;
  
  align-items: center;
  height: 824px;
  background: url("@/assets/dist/img/login-background.jpg");
  background-size: cover;
  text-align: center;
  /* position:absolute; */
}

.form-card {
  
  float:right;
  margin-right: 300px;
  margin-top: 150px;
 background-color: rgba(255, 255, 255, 0.4);
}

#signup-hint {
  font-size: 14px;
}

#signup-hint a {
  font-size: 14px;
  color: #1890ff;
  text-decoration: none;
}

#signup-hint a:hover {
  text-decoration: underline;
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

.my-custom-button {
  width: 420px;
}
</style>